<template>
  <div>
    <van-tabbar
      v-model="active"
      active-color="#ff5f16"
      inactive-color="#797d82"
      @change="onChange"
      v-if="$route.meta.keepAlive"
    >
      <van-tabbar-item>
        <i class="iconfont icon-dianyingpiaoiocn" slot="icon"></i>
        电影
      </van-tabbar-item>
      <van-tabbar-item>
        <i class="iconfont icon-yingyuan" slot="icon"></i>
        影院
      </van-tabbar-item>
      <van-tabbar-item>
        <i class="iconfont icon-zixun" slot="icon"></i>
        资讯
      </van-tabbar-item>
      <van-tabbar-item>
        <i class="iconfont icon-shouye" slot="icon"></i>
        我的
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import Vue from 'vue'
import { Tabbar, TabbarItem } from 'vant'

Vue.use(Tabbar)
Vue.use(TabbarItem)
export default {
  data() {
    return {
      active: 0,
      urlArr: ['/movie/playing', '/cinema', '/news', '/my']
    }
  },
  created() {
    // 获取当前路由
    // console.log(this.$route.path)
    const path = this.$route.path
    let index = this.urlArr.indexOf(path)
    // index找到了和-1
    // if (index >= 0) {
    //   this.active = index
    // } else {
    //   if (path === '/movie/playing') {
    //     this.active = 0
    //   }
    // }
    if (index < 0 && path === '/movie/feature') {
      index = 0
    }
    this.active = index
  },
  methods: {
    onChange(index) {
      this.$router.push(this.urlArr[index])
    }
  }
}
</script>
<style>
</style>